<template>
	<view class="f30 h100v">
		<view class="bf" style="padding-bottom: 20rpx;">
			<view style="padding-right: 30rpx;"><mg-radio rtype="2" bttc="wei" v-model="formData.timeType" :arr="arr" @change="change"></mg-radio></view>
			<view v-show="formData.timeType == 2" class="p330">
				<view v-for="(v, i) in formData.timeArr" :key="i" class="yjic b-d f-y-c mb30 p03" :style="{ borderColor: formDataTimeArrIndex == i ? tColor : '' }">
					<text class="iconfont iconsz f40"></text>
					<view @click="handClickOpenTime(i, 'startTime')" class="f-1 f30 t-c" :class="v.startTime ? 'wei' : 'c9'">{{ v.startTime || '开始时间' }}</view>
					<view>
						至
						<text v-if="v.ciri" class="ml10">次日</text>
					</view>
					<view @click="handClickOpenTime(i, 'endTime')" class="f-1 f30 t-c" :class="v.endTime ? 'wei' : 'c9'">{{ v.endTime || '结束时间' }}</view>
					<text @click="delTimeArr(i)" class="iconfont iconsc f40" :style="{ color: tColor }"></text>
				</view>
			</view>
			<view v-show="formData.timeType == 2 && formData.timeArr.length < 3" class="foot-btnc p-r">
				<button @click="addTimeArr" :disabled="tjsdd" class="foot-btn bf b-d wei" :style="{ color: tjsdd ? '#999' : tColor, borderColor: tjsdd ? '' : tColor }">
					+添加时段
				</button>
			</view>
		</view>
		<my-button :fiexd="true" @confirm="submit">确定</my-button>
		<!-- 时间 -->
		<w-picker mode="time" defaultVal="08:00:00" :current="false" :hasSecond="false" @confirm="confirmTime" ref="time" step="1"></w-picker>
	</view>
</template>

<script>
import mgRadio from '@/components/form/mg-radio.vue';
import wPicker from '@/components/form/w-picker.vue';
export default {
	components: {
		mgRadio,
		wPicker
	},
	data() {
		return {
			arr: [
				{
					value: '1',
					name: '24小时营业'
				},
				{
					value: '2',
					name: '设置营业时段'
				}
			],
			tjsdd: false,
			formData: {
				ident: 'takeOutSet',
				timeType: '1',
				timeArr: []
			},
			formDataTimeArrIndex: '',
			formDataTimeArrKey: '',
			timeChangShow: false,
			paramsShow: {
				hour: true,
				minute: true
			}
		};
	},
	methods: {
		change(msg) {
			this.formData.timeArr = [];
		},
		// 添加时间段
		addTimeArr() {
			const index = this.formData.timeArr.length;
			const obj = {
				startTime: '',
				endTime: '',
				ciri: false
			};
			if (index === 0) {
				this.formData.timeArr.push(obj);
			} else {
				if (this.formData.timeArr[index - 1].startTime !== '' && this.formData.timeArr[index - 1].endTime !== '') {
					this.formData.timeArr.push(obj);
				} else {
					this.util.message('请选择时间！', 3);
				}
			}
		},
		// 打开时间选择
		handClickOpenTime(index, msg) {
			this.formDataTimeArrIndex = index;
			this.formDataTimeArrKey = msg;
			this.$refs.time.show();
		},
		// 确认选择时间
		confirmTime(msg) {
			console.log(msg);
			// 当前对象数组的第几项
			var timeObjchildren = this.formData.timeArr[this.formDataTimeArrIndex];

			// 给当前对象数组的key赋值
			this.formData.timeArr[this.formDataTimeArrIndex][this.formDataTimeArrKey] = `${msg.checkArr[0][0]}:${msg.checkArr[0][1]}`;

			// 时间判断如果结束时间大于开始时间则ciri为true否则为false
			this.$validate
				.isEmpty(timeObjchildren.startTime)
				.then(res => {
					if (res) {
						return this.$validate.isEmpty(timeObjchildren.endTime);
					}
				})
				.then(msg => {
					if (msg) {
						//开始时间
						const start = parseInt(timeObjchildren.startTime.replace(/\-|\s/g, '').substring(0, 4));
						//结束时间
						const end = parseInt(timeObjchildren.endTime.replace(/\-|\s/g, '').substring(0, 4));
						// 判断是否为次日
						if (start > end) {
							timeObjchildren.ciri = true;
						} else {
							timeObjchildren.ciri = false;
						}
					}
				});
		},
		// 删除时间段
		delTimeArr(index) {
			this.formData.timeArr.splice(index, 1);
		},
		submit() {
			this.util
				.request({
					url: this.api.strogConfig,
					method: 'POST',
					ct: true,
					data: this.formData
				})
				.then(res => {
					if (res.code == 1) {
						this.util.message('保存成功！', 3);
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.menu-label {
	padding: 20rpx 30rpx;

	.title {
		min-width: 200rpx;
	}

	.rvalue {
		flex: 1;
	}
}
.yjic {
	height: 98rpx;
	border-radius: 98rpx;
}
</style>
